.topHeaderUserinfoWrap {

  .useravatar {
    margin-right: 10px;
  }

  .username,
  .useravatar,
  .userlabel {
    cursor: pointer;
  }

  .username {
    font-size: 16px;
    color: #3d4757;
    font-weight: bold;
  }

  .userlabel {
    width: 46px;
    height: 20px;
    background-image: -webkit-linear-gradient(274deg,
        #ffda8e 0%,
        #e6b04a 100%),
      -webkit-linear-gradient(#f6f6fa,
        #f6f6fa);
    background-image: -moz-linear-gradient(274deg,
        #ffda8e 0%,
        #e6b04a 100%),
      -moz-linear-gradient(#f6f6fa,
        #f6f6fa);
    background-image: -o-linear-gradient(274deg,
        #ffda8e 0%,
        #e6b04a 100%),
      -o-linear-gradient(#f6f6fa,
        #f6f6fa);
    background-image: linear-gradient(176deg,
        #ffda8e 0%,
        #e6b04a 100%),
      linear-gradient(#f6f6fa,
        #f6f6fa);
    background-blend-mode: normal,
      normal;
    font-size: 10px;
    color: #666666;
    border-radius: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }


  @media screen and (max-width:1400px) {}

  @media screen and (max-width:1200px) {
    .useravatar {
      display: none;
    }
  }

  @media screen and (max-width:992px) {}

  @media screen and (max-width:768px) {
    & {
      display: none;
    }
  }

  @media screen and (max-width:576px) {}
}

// 用户信息气泡卡片
#userinfo-wrap {
  .userinfoPopover {
    .ant-popover-inner {
      border-radius: 8px;
    }

    .ant-popover-arrow {
      display: none;
    }

    .ant-popover-inner-content {
      padding: 0;
    }

    .ant-popover-arrow-content::before {
      background-color: #0076fe;
    }

    .user-content-wrap {
      width: 256px;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -moz-box-orient: vertical;
      -moz-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;

      .top-wrap {
        background-repeat: no-repeat;
        color: #fff;
        font-size: 18px;
        padding: 20px 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-radius: 8px 8px 0 0;

        .userimg {
          border: solid 2px #ffffff;
          margin-bottom: 2px;
        }
      }

      .bottom-wrap {
        border-radius: 8px;
        padding: 40px 20px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;

        .ant-btn {
          width: 100%;
          color: #3d4757;
          font-size: 18px;
          margin-bottom: 5px;
          height: 48px;
          border-radius: 4px;

          .ant-image {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            margin: 0 20px;
          }

          &:hover {
            background-color: #eff4fc;
          }

          &:last-child {
            margin-bottom: 0;
          }

          .anticon {
            color: #acb4c6;
            font-size: 20px;
          }
        }
      }
    }

  }
}

//修改个人信息和密码弹出框
.userinfoModal {

  .userAvatarModalContent,
  .userinfoModalContent {
    padding: 0 30px;
  }

  .userAvatarModalContent {
    .ant-col {
      cursor: pointer;

      .active {
        border: 2px solid #0076fe;
      }
    }
  }

  .userinfoModalContent {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

    .title {
      font-size: 14px;
      color: #666;
      margin-bottom: 4px;
    }

    .input-wrap {
      padding-bottom: 15px;

      .ant-image {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
      }
    }

    .useravatar-upload {
      width: 160px;
      height: 160px;
      margin: 0 auto;
    }

    .updateAvatarBtn {
      text-align: center;
      margin: 10px auto 20px;
    }

  }

}